<template>
    <div class="navigate">
        <!-- <div class="logo">
          <img src="../../../../static/imgs/softwareLogo.jpg" alt="">
        </div> -->
        <!-- <span class="single">组件--博客资源</span> -->
        <!-- <blog :ischange="ischange"></blog> -->
        <div class="blog">
          <span>
            <router-link to="/">
              <a href="###" @click="changeColor1()" ref="home" class="home">主页</a>
            </router-link>
          </span>

          <span>
            <router-link to="/resource">
              <a href="###" @click="changeColor2()" ref="resource">资源</a>
            </router-link>
          </span>
          
          <span>
            <router-link to="/SelfStudy/studyMain">
              <a href="###" @click="changeColor3()" ref="self">个人自习</a>
            </router-link>
          </span>
        </div>
        
        <search class="search"></search>
        
          <div class="write">
            <router-link to="/write">
              <a href="###" ref="write" @click="changeColor4()">写博客</a>
            </router-link>
          </div>
        
        
        
          <div class="upload">
            <router-link to="/upload">
              <a href="###" ref="upload" @click="changeColor5()">上传资源</a>
            </router-link>
          </div>
        
        <inform  @click="changeColor3()" ref="inform" class="inform"></inform>
        <!-- <span class="single">组件--个人用户</span> -->
        <user @click="changeColor4()" ref="user" class="user"></user>
  
    </div>
</template>

<script>
import search from './Navigates/search'
import inform from './Navigates/inform'
import user from './Navigates/user'
export default {
  name: 'navigate',
  components: {
    search,
    inform,
    user,
  },
  data () {
    return {
      show:false,
    }
  },

  methods: {
    flow() {
      this.show = true
    },

    flowout() {
      this.show = false
    },

    changeColor1 () {
      this.$refs.home.style.color = "#FFD700"

      this.$refs.resource.style.color = "#333"
      this.$refs.self.style.color = "#333"
      this.$refs.write.style.color = "#333"
      this.$refs.upload.style.color = "#333"
    },

    changeColor2 () {
      this.$refs.resource.style.color = "#FFD700"

      this.$refs.home.style.color = "#333"
      this.$refs.self.style.color = "#333"
      this.$refs.write.style.color = "#333"
      this.$refs.upload.style.color = "#333"
    },

    changeColor3 () {
      this.$refs.self.style.color = "#FFD700"

      this.$refs.home.style.color = "#333"
      this.$refs.resource.style.color = "#333"
      this.$refs.write.style.color = "#333"
      this.$refs.upload.style.color = "#333"
    },

    changeColor4 () {
      this.$refs.write.style.color = "#FFD700"

      this.$refs.home.style.color = "#333"
      this.$refs.resource.style.color = "#333"
      this.$refs.self.style.color = "#333"
      this.$refs.upload.style.color = "#333"
    },

    changeColor5 () {
      this.$refs.upload.style.color = "#FFD700"

      this.$refs.home.style.color = "#333"
      this.$refs.resource.style.color = "#333"
      this.$refs.self.style.color = "#333"
      this.$refs.write.style.color = "#333"
    },

  },

}
</script>

<style lang="stylus" scoped>
.navigate
  width 100%
  height 4rem
  position fixed
  z-index 999
  top 0rem
  font-size 1rem
  border-bottom .05rem #666 solid
  border 1px #ccc solid
  border-radius 10px
  box-shadow: 0 0 0.266667rem rgba(131, 171, 175, 0.5);
  background-color skyblue
  a:hover
    color #FFD700
  .blog
    display inline-block
    position fixed
    width 24%
    margin-left 10%
    height 4rem
    // background-color red
    a:hover
      color #FFD700
    span
      display inline-block
      width 24%
      line-height 2rem
      margin-left 6%
      margin-top 2rem
      text-align center
      // background-color #fff
      .iconfont
        color #FFD700
  .search 
    margin-left 35%
  .logo
    width 8%
    line-height 4rem
    display inline-block
    margin-left 5%
    box-shadow: 0 0 0.266667rem rgba(131, 171, 175, 0.5);
    // background-color red
    img 
      width 100%
      margin-left 0%
  .write 
    width 8%
    line-height 1rem
    position fixed
    display inline-block
    margin-top 2.5rem
    margin-left 59%
    text-align center
    // background-color #fff 
  .upload 
    width 8%
    line-height 2rem
    position fixed
    display inline-block
    margin-top 2rem
    margin-left 67%
    text-align center
    // background-color #fff 
  .inform 
    margin-left 75%
  .user
    margin-left 84%
</style>
